<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-03-22 17:34:08
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-04-06 16:39:34
 * @FilePath: \visitor_management\src\components\Toast.vue
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :title="title || $t('common.batchDownload')"
    :append-to-body="true"
    width="520px"
    :before-close="cancel"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form
        ref="form"
        v-if="step == 0"
        :model="formData"
        inline
        @submit.native.prevent
      >
        <el-form-item :label="$t('common.curuser_pwd')">
          <PasswordInput
            @keyup.enter.native="confirm"
            v-model="formData.curuser_pwd"
          />
        </el-form-item>
      </el-form>
      <div v-else class="d-flex flex-column jc-center ai-center">
        <div class="mb-30">{{ $t('common.exportQuantityRange') }}:</div>
        <div class="d-flex ai-center input1 mt-15 mb-15">
          <el-input
            v-model="start_no"
            @input="handleInput"
            @keypress="handleKeyPress"
          ></el-input>
          &nbsp;&nbsp;-&nbsp;&nbsp;
          <el-input
            v-model="end_no"
            @input="handleInput"
            @keypress="handleKeyPress"
          ></el-input>
        </div>
        <div class="red">{{$t('common.numMaxLimit')}}</div>
        <div class="red mt-15 mb-15">{{ $t('common.curNum') }}: {{ num }} {{$t('common.tiao')}}</div>
        <div v-show="zippasswd">{{ $t('common.zipPwd') }}: {{ zippasswd }}</div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">{{
        $t("common.cancel")
      }}</MyButton>
      <MyButton :disabled="isBtnDisabled" class="confirm" @click="confirm">
        {{ step == 0 ? $t("common.confirm") : $t("common.export") }}
      </MyButton>
    </div>
  </el-dialog>
</template>

<script>
import EnterPassword from "@/components/dialog/EnterPassword";
export default {
  extends: EnterPassword,
  props: {
    zippasswd: {
      type: String,
      default: "",
    },
    num: {
      type: Number,
      default: 0,
    },
    // 当前
    step: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      start_no: 1,
      end_no: 10,
    };
  },
  watch: {
    num: {
      handler(val) {
        if (val <= 500) {
          this.end_no = val;
        }
      },
    },
    _visible: {
      handler(val) {
        if (!val) {
          this.formData = {};
        } else {
          this.start_no = 1;
          this.end_no = this.num;
        }
      },
    },
  },
  computed: {
    isBtnDisabled() {
      return this.step == 1 ? !(this.start_no && this.end_no) : false;
    },
  },
  methods: {
    confirm() {
      if (this.step == 0) {
        this.formData.curuser_pwd && this.$emit("confirm", this.formData);
      } else {
        this.$emit("confirm", {
          start_no: this.start_no,
          qry_len: this.end_no - this.start_no + 1,
        });
      }
    },
    handleInput(value) {
      // 使用正则表达式替换非数字字符
      this.inputValue = value.replace(/[^0-9]/g, "");
    },
    handleKeyPress(event) {
      // 阻止非数字字符的输入
      if (!/[0-9]/.test(event.key)) {
        event.preventDefault();
      }
    },
    handlePaste(event) {
      // 获取粘贴的数据
      const paste = (event.clipboardData || window.clipboardData).getData(
        "text"
      );
      // 如果粘贴的数据包含非数字字符，阻止粘贴
      if (!/^[0-9]+$/.test(paste)) {
        event.preventDefault();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  .content {
    width: 100%;
    .red {
      color: rgba(241, 8, 8, 0.7);
      font-size: 18px;
    }
  }
}
</style>
